<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>ssss</h1><button id="btnSend">send</button>
<form class="form" role="form">

</form>
<div id="content"></div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
var socket;
if(typeof(WebSocket) == "undefined") {
    console.log("您的浏览器不支持WebSocket");
}else{
    console.log("您的浏览器支持WebSocket");
    
    //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
    //socket = new WebSocket("ws://localhost:9094/starManager/websocket/张三")
    socket = new WebSocket("ws://localhost:8089/websocket");
    //打开事件
    socket.onopen = function() {
        console.log("Socket 已打开");
        //socket.send("这是来自客户端的消息" + location.href + new Date());
    };
    //获得消息事件
    socket.onmessage = function(msg) {
        console.log(msg.data);
        //发现消息进入    调后台获取
        $('#content').append('<h3>'+msg.data+'</h3>')
    };
    //关闭事件
    socket.onclose = function() {
        console.log("Socket已关闭");
    };
    //发生了错误事件
    socket.onerror = function() {
        alert("Socket发生了错误");
    }
     $(window).unload(function(){
          socket.close();
        });

     $("#btnSend").click(function() {
    	   socket.send("这是来自客户端的消息" + location.href + new Date());
     });
//
//                          $("#btnClose").click(function() {
//                              socket.close();
//                          });
}
</script>
</body>
</html>